<template>
  <div class="footer container">
    <div class="footer-left">
      <div class="mb-4">
        ©2022 美团版权所有<a href="#" class="p-l-r-20">京ICP证070791</a>
        <a href="#">号京ICP备10211739号-1</a>
      </div>
      <a href="#" class="display-block mb-4"
        >广播电视节目制作经营许可证（京）字第03889号</a
      >
      <a href="#" class="display-block mb-4">
        药品医疗器械网络信息服务备案 （京）网药械信息备字（2022）第00228号
      </a>
      <a href="#" class="display-block mb-4">
        医疗器械网络交易服务第三方平台备案：（京）网械平台备字[2018]第00004号
      </a>

      <a href="#" class="display-block mb-4">平台EDI许可证</a>
    </div>
    <div class="footer-right">
      <a href="#" class="networkSecurity active">
        <img
          src="https://p0.meituan.net/travelcube/d0289dc0a46fc5b15b3363ffa78cf6c719256.png"
          class="networkSecurityIcon"
        />京公网安备 11000002002052号
      </a>

      <div class="businessLicense-box">
        <img
          src="https://p1.meituan.net/travelcube/3e7f8a17e55bace814166b667618b459366061.png@76h_76w_2e"
          class="businessLicenseIcon"
        />
        <a href="#" class="active">北京三快科技有限公司</a>
        <a href="#" class="beian-info" title="网站备案信息"></a>
        <a href="#" class="beian-12315" title="12315"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<script setup></script>

<style scoped>
.footer {
  font-size: 12px;
  color: #999999;
  margin-top: 40px;
  padding: 15px 0;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
}
.footer-left {
  margin-left: 20px;
}
.footer-left a:hover {
  color: #fe8c00;
}
.display-block {
  display: block;
}
.p-l-r-20 {
  padding: 0 20px;
}
.mb-4 {
  margin-bottom: 4px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.networkSecurity {
  position: relative;
  padding: 0 0 4px 20px;
}
.networkSecurityIcon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 15px;
  padding: 2px;
  /* box-sizing: border-box; */
}
.businessLicense-box {
  height: 38px;
  display: flex;
  align-items: center;
  margin-top: 3px;
}
.businessLicense-box a {
  margin-left: 2px;
}
.businessLicenseIcon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.beian-info {
  width: 109px;
  height: 38px;
  margin-right: 2px;
  background-image: url(./images/spiritChart.png);
  background-position: 0 -167px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.beian-12315 {
  width: 107px;
  height: 38px;
  background-image: url(./images/spiritChart.png);
  background-position: 0 -41px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.active:hover {
  color: #fe8c00;
}
</style>
